<template>
    <div class="app-container">
      <indexMap v-if="completeRefreshSingleBuilding" :allListData="allListData" @showDetailId="showDetailId"
          :open="open" :queryOpen="queryOpen" @showHideUploadDiv="showHideUploadDiv"
        @showHideQueryDiv="showHideQueryDiv" @getMap="getMap" />
      <!--查询面板-->
      <el-card v-if="showHideQueryDivBool" class="new-queryDiv">
        <div class="new-queryDiv-inner">
          <el-form :model="queryParams" label-position="right" label-width="82px" ref="queryRef">
              <el-form-item label="选择版本" prop="versionCode">
              <el-input v-model="queryParams.versionCode" placeholder="请选择版本" :suffix-icon="MoreFilled" readonly
                @click="selectVersionCode" clearable />
            </el-form-item>
            <el-form-item label="省" prop="province">
              <el-input v-model="queryParams.province" placeholder="" readonly />
            </el-form-item>
            <el-form-item label="市" prop="city">
              <el-input v-model="queryParams.city" placeholder="" readonly />
            </el-form-item>
            <el-form-item label="区/县" prop="county">
              <el-input v-model="queryParams.county" placeholder="" readonly />
            </el-form-item>
              <el-form-item label="设防情况" prop="defenceLevel">
                <el-select v-model="queryParams.defenceLevel" placeholder="请选择" clearable>
                  <el-option v-for="item in defenceLevelArr" :key="item.dictItemCode" :label="item.dictItemName"
                  :value="item.dictItemCode">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="结构类型" prop="structureType1">
              <el-row justify="space-between" align="middle">
              <el-select v-model="queryParams.structureType1" placeholder="请选择" @change="chooseStructureType" clearable>
              <!-- :style="{width: ['1','2','6'].includes(pageSize.structureType1) ? '140px' : '212px'}"> -->
                <el-option v-for="item in structureTypeArr1" :key="item.dictItemCode" :label="item.dictItemName"
                  :value="item.dictItemCode">
                </el-option>
              </el-select>
              <template v-show="['1','2','6'].includes(queryParams.structureType1)">
                <el-divider style="width: 20px;margin: 16px 5px;"></el-divider>
                <!-- <el-select v-model="pageSize.structureType2" placeholder="请选择" clearable style="width:170px"> -->
                <el-select v-model="queryParams.structureType2" placeholder="请选择" clearable>
                  <el-option v-for="item in structureTypeArr2" :key="item.dictItemCode" :label="item.dictItemName"
                    :value="item.dictItemCode">
                  </el-option>
                </el-select>
              </template>
              </el-row>
            </el-form-item>
          </el-form>
          <el-row justify="space-around">
            <el-button @click="queryClick" type="primary">查询图层</el-button>
            <el-button @click="queryTableClick" type="primary">查询列表</el-button>
            <el-button plain @click="closeSelect">关闭</el-button>
          </el-row>
        </div>
      </el-card>
      <!-- 导入对话框 -->
      <el-dialog title="添加数据" v-model="open" width="800px" destroy-on-close :show-close="false"
      :close-on-click-modal="false" custom-class="singLeBuilding-add-dialog" @close="addClose">
          <el-scrollbar>
            <el-form ref="ruleForm" :model="form" :rules="rules" label-width="120px">
              <p class="mt15"></p>
              <el-form-item label="版本操作" prop="banben" required>
                <el-radio-group v-model="form.banben" @change="changeBanben">
                  <el-radio label="保存新版本">保存新版本</el-radio>
                  <!-- <template v-if="versionCodeList.length != 0">
                    <el-radio label="覆盖旧版本">覆盖旧版本</el-radio>
                  </template> -->
                </el-radio-group>
              </el-form-item>
              <el-form-item label="数据级别" prop="dataRangeCountry">
                <el-row>
                  <el-col :span="8">
                    <el-select v-model="form.dataRangeCountry" placeholder="请选择" style="width:192px" @change="chooseFormScope"
                      clearable :disabled="disabled1">
                      <el-option v-for="item in [{ value: 1, label: '国家级' }, { value: 2, label: '省级' }]" :key="item.value"
                        :label="item.label" :value="item.value">
                      </el-option>
                    </el-select>
                  </el-col>
                </el-row>
              </el-form-item>
              <el-form-item label="版本范围" prop="dataRange">
                <el-row :gutter="32">
                  <el-col :span="8">
                    <el-select v-model="queryParams1.dataRangeProvince" placeholder="省" style="width:100%"
                      @change="chooseProvince" clearable
                      :disabled="form.dataRangeCountry == null || form.dataRangeCountry == '' || disabled1">
                      <el-option key="全国" label="全国" value="全国" v-if="form.dataRangeCountry == '1'"></el-option>
                      <el-option v-for="item in provinceData" :key="item.id" :label="item.name" :value="item.id">
                      </el-option>
                    </el-select>
                  </el-col>
                  <el-col :span="8">
                    <el-select v-model="queryParams1.dataRangeCity" placeholder="市" style="width:100%" @change="chooseCity"
                      clearable
                      :disabled="queryParams1.dataRangeProvince == '全国' || form.dataRangeCountry == null || form.dataRangeCountry == ''">
                      <el-option key="全部" label="全部" value="全部" v-if="cityData && cityData.length > 0"></el-option>
                      <el-option v-for="item in cityData" :key="item.id" :label="item.name" :value="item.id">
                      </el-option>
                    </el-select>
                  </el-col>
                  <el-col :span="8">
                    <el-select v-model="queryParams1.dataRangeArea" placeholder="区县" style="width:100%" @change="chooseCounty"
                      clearable
                      :disabled="queryParams1.dataRangeProvince == '全国' || queryParams1.dataRangeCity == '全部' || form.dataRangeCountry == null || form.dataRangeCountry == ''">
                      <el-option key="全部" label="全部" value="全部" v-if="areaData && areaData.length > 0"></el-option>
                      <el-option v-for="item in areaData" :key="item.id" :label="item.name" :value="item.id">
                      </el-option>
                    </el-select>
                  </el-col>
                </el-row>
              </el-form-item>
              <el-form-item label="数据名称" prop="dataName">
                <el-input v-model="form.dataName" placeholder="请输入数据名称" clearable />
              </el-form-item>
              <el-form-item label="数据说明" prop="dataDesc">
                <el-input v-model="form.dataDesc" type="textarea" maxlength="300" show-word-limit
                  :autosize="{ minRows: 3, maxRows: 5 }" placeholder="请输入数据说明" />
              </el-form-item>
              <template v-if="form.banben != '保存新版本'">
                <el-form-item label="版本号" prop="versionCode">
                  <el-select v-model="form.versionCode" placeholder="请选择版本号" style="width:100%" clearable>
                    <el-option v-for="(item, index) in versionCodeList" :key="index" :label="item" :value="item">
                    </el-option>
                  </el-select>
                </el-form-item>
              </template>
              <template v-else>
                <el-form-item label="版本号">
                  <span>保存后自动生成</span>
                </el-form-item>
              </template>
              <el-form-item label="版本日期" prop="versionTime">
                <el-date-picker v-model="form.versionTime" type="date" placeholder="请选择版本日期" value-format="YYYY-MM-DD"
                  :disabled-date="disabledDate" clearable style="width:100%" />
              </el-form-item>
              <el-form-item label="版本说明" prop="versionDesc">
                <el-input v-model="form.versionDesc" type="textarea" maxlength="300" show-word-limit
                  :autosize="{ minRows: 3, maxRows: 5 }" placeholder="请输入版本说明" />
              </el-form-item>
              <template v-if="form.banben != '保存新版本'">
                <el-form-item label="更新说明" prop="updateDesc">
                  <el-input v-model="form.updateDesc" type="textarea" maxlength="300" show-word-limit
                    :autosize="{ minRows: 3, maxRows: 5 }" placeholder="请描述版本更新的数据范围及内容，限制300字" clearable />
                </el-form-item>
              </template>
              <el-form-item label="数据文件" prop="dataFileIds" style="position:relative">
                <fileUploadData ref="dataFileRef" v-model="form.dataFileId" :fileType="fileType" @sureUploadFile="uploadFile"
                  @dels="dels" :isSpatialData="isSpatialData" :name="name" />
              </el-form-item>
              <el-form-item label="上传附件">
                <fileUpload ref="attachmentFileRef" v-model="form.attachmentId" :isShowTip="false" />
              </el-form-item>
              <el-form-item label="上传人">{{ form.user }}</el-form-item>
              <el-form-item label="上传日期">{{ form.uploadTime }}</el-form-item>
            </el-form>
          </el-scrollbar>
        <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" @click="submitForm" auto-insert-space>保存</el-button>
          <el-button plain @click="closeForm" auto-insert-space>取消</el-button>
        </div>
      </template>
      </el-dialog>
      <el-dialog title="选择版本" v-model="openLeader" width="900px" append-to-body @close="closeVersicode">
      <p></p>
      <el-form ref="selectRef" :model="pageSize">
        <el-row style="margin: 20px 0;">
          <el-col :span="8">
            <el-form-item label="数据级别" label-width="80px">
              <!-- <el-input v-model="pageSize.dataRangeCountry" placeholder="请选择数据类别" clearable /> -->
              <el-select v-model="pageSize.dataRangeCountry" placeholder="请选择数据级别" @change="chooseFormScope1" clearable
                :disabled="disabled1">
                <el-option v-for="item in [{ value: 1, label: '国家级' }, { value: 2, label: '省级' }]" :key="item.value"
                  :label="item.label" :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="省" label-width="80px">
              <!-- <el-input v-model="pageSize.dataRangeProvince" placeholder="请选择省" clearable /> -->
              <el-select v-model="pageSize.dataRangeProvince" placeholder="请选择省" @change="chooseProvince" clearable
                value-key="name">
                <el-option v-for="item in provinceData" :key="item.id" :label="item.name" :value="item">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="市" label-width="80px">
              <!-- <el-input v-model="pageSize.dataRangeCity" placeholder="请选择市" clearable /> -->
              <el-select v-model="pageSize.dataRangeCity" placeholder="请选择市" @change="chooseCity" clearable
                value-key="name">
                <el-option v-for="item in cityData" :key="item.id" :label="item.name" :value="item">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="区县" label-width="80px">
              <!-- <el-input v-model="pageSize.dataRangeArea" placeholder="请选择区县" clearable /> -->
              <el-select v-model="pageSize.dataRangeArea" placeholder="请选择区县" @change="chooseCounty" clearable
                value-key="name">
                <el-option v-for="item in areaData" :key="item.id" :label="item.name" :value="item">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-button type="primary" @click="handleQuery1" style="float: right;">查询</el-button>
          </el-col>
        </el-row>
      </el-form>
      <el-table ref="selectMunchRef" :data="leaderList" stripe v-loading="versionLoading">
        <el-table-column type="expand" width="1">
        <template #default="props">
          <div class="expandTable">
            <h3 class="tab-more">更多信息</h3>
            <p><span class="sub-tit">版本说明:</span> {{ props.row.versionDesc }}</p>
            <p><span class="sub-tit">数据说明:</span> {{ props.row.dataDesc }}</p>
            <!-- <p v-if="props.row.updateDesc"><span class="sub-tit">更新说明:</span> {{ props.row.updateDesc }}</p> -->
            <!-- <p><span class="sub-tit">使用系统:</span> {{ props.row.useThisSystems }}
              <el-tooltip class="box-item" placement="right" v-if="props.row.useThisSystems">
                <template #content>
                  <div style="float: left;margin-right: 10px;">
                    <p v-for="item in props.row.subAppInfo.slice(0,6)">{{ item.serialNumber }} &nbsp;&nbsp;{{ item.name }}</p>
                  </div>
                  <div style="float: right;">
                    <p v-for="item in props.row.subAppInfo.slice(6,12)">{{ item.serialNumber }} &nbsp;&nbsp;{{ item.name }}</p>
                  </div>
                </template>
                <el-tag>系统使用说明</el-tag>
              </el-tooltip>
            </p> -->
            <p><span class="sub-tit" style="margin-bottom: 10px;">数据文件:</span>
              <template v-for="item in props.row.dataFileList">
                <u style="color:#107ce5;cursor: pointer;" @click="handleDownload(item)">{{ item.attachName }}</u><br />
              </template>
            </p>
            <p><span class="sub-tit">附件:</span>
              <template v-for="item in props.row.attachmentList">
                <u style="color:#107ce5;cursor: pointer;" @click="handleDownload(item)">{{ item.attachName }}</u><br />
              </template>
            </p>
          </div>
        </template>
      </el-table-column>
        <el-table-column label="单选" width="55px">
          <template #default="scope">
            <el-radio :label="scope.row.id" v-model="selectRadio"
              @click.native.stop.prevent="getCurrentRow(scope.row)">&nbsp;</el-radio>
          </template>
        </el-table-column>
        <el-table-column label="序号" align="center" width="55">
          <template #default="scope">
            <span>{{ (pageSize.page - 1) * pageSize.rows + scope.$index + 1 }}</span>
          </template>
        </el-table-column>
        <el-table-column label="版本号" align="center" prop="versionCode" />
        <el-table-column label="数据名称" align="center" prop="dataName" />
        <el-table-column label="数据范围" align="center" prop="dataRange" />
        <el-table-column label="上传人" align="center" prop="uploadUser" />
        <el-table-column label="上传时间" align="center" prop="uploadTime" />
        <el-table-column label="操作" align="center" width="180" fixed="right">
            <template #default="scope">
                <el-button type="text" size="small" @click="handleMore(scope.row)">更多数据</el-button>
                <el-button type="text" size="small" @click="handleDelete(scope.row)">删除版本</el-button>
            </template>
        </el-table-column>
      </el-table>
      <pagination v-show="total > 0" :total="total" v-model:page="pageSize.page" v-model:limit="pageSize.rows"
        @pagination="handleQuery1" />
      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" @click="querySelect" auto-insert-space>确定</el-button>
          <el-button plain @click="openLeader = false" auto-insert-space>取消</el-button>
        </div>
      </template>
    </el-dialog>
      <!--表格面板-->
      <Table v-if="completeRefreshData == true" :versionCode="queryParams.versionCode" :typeName="typeName"
        :typeCode="selectType" :showTable="detailTable" :paramsData="paramsData" @closeTableDiv="closeDetailResultDiv" :defenceLevelArr="defenceLevelArr" :usageArr1="usageArr1" :selectListId="selectListId"> 
      </Table>
      <!--数据图层组件-->
      <!--<MapLayers :map="map" :dataTypeInfoArray="dataTypeInfoArray" :layerInfoParams="layerInfoParams"
        @setSelectId="setSelectId">
      </MapLayers>-->
      <!--图例-->
      <div class="new-legend">
        <div style="text-align: center;height: 30px;">
          <span style="font-size: 16px;font-weight: bold;color: rgb(16, 124, 229);word-spacing: 5px">图 例</span>
        </div>
        <div><img src="@/assets/map/image/fwType/1.png" title="图例"><span>砌体结构</span></div>
        <div><img src="@/assets/map/image/fwType/2.png" title="图例"><span>钢筋混凝土结构</span></div>
        <div><img src="@/assets/map/image/fwType/3.png" title="图例"><span>土木结构</span></div>
        <div><img src="@/assets/map/image/fwType/4.png" title="图例"><span>木结构</span></div>
        <div><img src="@/assets/map/image/fwType/5.png" title="图例"><span>钢结构</span></div>
        <div><img src="@/assets/map/image/fwType/6.png" title="图例"><span>工业厂房</span></div>
        <div><img src="@/assets/map/image/fwType/7.png" title="图例"><span>组合结构</span></div>
        <div><img src="@/assets/map/image/fwType/8.png" title="图例"><span>其他</span></div>
      </div>
    </div>
  </template>
  
  <script setup name="kilometerGrid">
  import indexMap from '@/map/basicDataManage/singleBuilding/indexMap.vue'
  import { getProvince, getChildArea } from "@/api/system/division";
  import { uploadAdministrativeArea } from '@/api/basicDataManage/singleBuilding/index.js'
  import { iServerHttp } from "@/map/projMap.js";
  import { getDict } from "@/api/system/dict"
  import { getToken } from "@/utils/auth"
  import { getUserId } from '@/utils/auth'
  import { useNow, useDateFormat } from '@vueuse/core'
  import { page ,delVersions} from '@/api/basicDataManage/singleBuilding/index.js'
  import { mapAllListBuilding } from '@/api/basicDataManage/singleBuilding.js'
  import MapLayers from '@/map/components/mapLayers/index.vue';
  import fileUploadData from '../kilometerGrid/components/FileUpload/index'
  import { MoreFilled } from '@element-plus/icons-vue'
  //表格面板
  import Table from '../kilometerGrid/table.vue';
  import { ref } from 'vue';
  
  const { proxy } = getCurrentInstance();

  const disabled1 = ref(false);
  const disabledDate = (time) => {
    return time.getTime() > Date.now()
  } // 禁止选择时间范围
  const dataRangeProvinceCheck = (rule, value, callback) => {
    if (queryParams1.value.dataRangeProvince == '全国' && (!queryParams1.value.dataRangeCity || queryParams1.value.dataRangeCity == '') && (!queryParams1.value.dataRangeArea || queryParams1.value.dataRangeArea == '')) {
      callback()
    } else if (queryParams1.value.dataRangeProvince) {
      if (!queryParams1.value.dataRangeCity) {
        callback('请选择版本范围-市')
      } else if (queryParams1.value.dataRangeCity == '全部') {
        callback()
      } else if (queryParams1.value.dataRangeCity != '全部') {
        if (!queryParams1.value.dataRangeArea) {
          callback('请选择版本范围-区县')
        } else {
          callback()
        } 
      }
    } else {
      callback(new Error('请选择版本范围'))
    }
  }
  
  /*** 导入参数 */
  const upload = reactive({
    isUploading: false,
    headers: { token: "token " + getToken() },
    url: import.meta.env.VITE_APP_BASE_API + "/buildingIndividual/upload"
  });
  const data = reactive({
    queryParams: {
      versionCode: '',
      tempVersionCode: '',
      dataName: '',
      dataType: '',
      dataRangeCountry: '',
      dataRangeProvince: '',
      dataRangeCity: '',
      dataRangeArea: '',
      versionStartTime: '',
      versionEndTime: '',
      uploadStartTime: '',
      uploadEndTime: '',
      province: '',
      city: '',
      county: '',
      structureType1:'',
      structureType2:'',
      defenceLevel:'',
      versionCode:'',
    },
    form: {
      banben: '保存新版本',
      dataScope: '1',
      type: '1',
      dataFileId: [],
      versionCode: ''
    },
    queryParams1: {
      dataRangeProvince: '',
      dataRangeCity: '',
      dataRangeArea: '',
    },
    rules: {
      dataRangeCountry: [{ required: true, message: "数据级别不能为空", trigger: "change" }],
      dataRange: [{ required: true, trigger: "change", validator: dataRangeProvinceCheck }],
      // dataRangeProvince: [{ message: "省不能为空", trigger: "change", validator: dataRangeProvinceCheck }],
      dataType: [{ required: true, message: "数据类别不能为空", trigger: "change" }],
      dataName: [{ required: true, message: "数据名称不能为空", trigger: "blur" }],
      dataDesc: [{ required: true, message: "数据说明不能为空", trigger: "blur" }],
      versionCode: [{ required: true, message: "版本号不能为空", trigger: "change" }],
      versionTime: [{ required: true, message: "版本日期不能为空", trigger: "change" }],
      versionDesc: [{ required: true, message: "版本说明不能为空", trigger: "blur" }],
      updateDesc: [{ required: true, message: "更新说明不能为空", trigger: "blur" }],
      dataFileIds: [{ required: true, message: "数据文件不能为空", trigger: "blur" }],
      dataFrom: [{ required: true, message: "数据来源不能为空", trigger: "blur" }],
      uploadSource: [{ required: true, message: "数据来源不能为空", trigger: "blur" }],
      spatialDataType: [{ required: true, message: "空间数据类型不能为空", trigger: "blur" }],
      projectionInfo: [{ required: true, message: "投影信息不能为空", trigger: "blur" }],
      fieldNum: [{ required: true, message: "字段个数不能为空", trigger: "blur" }, { pattern: /^[1-9]\d*$/, message: '请输入大于0的整数！', trigger: 'change' }],
      fieldEntry: [{ required: true, message: "字段条目不能为空", trigger: "blur" }, { pattern: /^[1-9]\d*$/, message: '请输入大于0的整数！', trigger: 'change' }],
  },
    pageSize: {
      dataRangeProvince: '', //版本范围省id
      dataRangeCity: '', //版本范围市id
      dataRangeArea: '', //版本范围县区id
      defenceLevel: '',
      page: 1,
      rows: 10,
    },
    layerInfoParams: {//查询图层信息参数（图层序号、图层名称、查询条件、是否显示）
      code: "",
      name: "",
      sqlText: '',
      show: false
    },
  })
  const { queryParams, form,rules, queryParams1, pageSize, layerInfoParams } = toRefs(data);
  //数据类型
  const dataTypeInfoArray = ref([
    { code: "1", name: "建筑物单体", table: "fxqh_building_individual", url: iServerHttp() + "/iserver/services/map-fxfzfxqh/rest/maps/fxqh_building_individual@fxfzfxqh", zIndex: 4, fieldId: "id" },
  ]);
  let open = ref(false)
  const showHideQueryDivBool = ref(false)
  const queryOpen = ref(false)
  const provinceData = ref([])
  const cityData = ref([])
  const areaData = ref([])
  const openLeader = ref(false)
  const leaderList = ref([])
  const completeRefreshData = ref(false)
  const selectId = ref(null);//选中查看详情数据Id
  const selectType = ref("");//选中查看详情数据类型
  const selectDataList = ref([]);//选中查看详情数据Id的1条数据
  const selectListId = ref('')
  const detailTable = ref(false);//是否显示表格面板
  const total = ref(0)
  const isSpatialData = ref(0);
    const name = ref('建筑物单体数据导入模板.xlsx');
    const fileType = ref(['xlsx','xls']);
  
  //地图传参--start
  const completeRefreshSingleBuilding = ref(false);//防止刷新后地图不显示
  const allListData = ref([]);
  
  const showHideUploadDiv = (bool) => {//显示|隐藏上传面板
    form.value.uploadTime = useDateFormat(useNow(), 'YYYY-MM-DD')
    form.value.uploadUser = getUserId();
    form.value.user = localStorage.getItem('userName');
    open.value = bool;
    showHideQueryDivBool.value = false;
    // showHideQueryDivBool.value = false;
    // queryFileResult.value = false;
    // if (bool) {
    //   showHideDivType.value = "showUploadDiv";
    // } else {
    //   showHideDivType.value = "";
    // }
    // //清空上传参数
    // clearUploadParams();
  }
  const showHideQueryDiv = (bool) => {//显示|隐藏查询面板
    queryOpen.value = false
    showHideQueryDivBool.value = bool;
    // if (bool) {
    //   showHideDivType.value = "showQueryDiv";
    // } else {
    //   showHideDivType.value = "";
    // }
    // //清空查询参数
    // clearQueryParams();
  }
  // 关闭
  function closeForm() {
    open.value = false;
  }

  function closeSelect() {
    showHideQueryDivBool.value = false;
    queryOpen.value = true
    proxy.resetForm('queryRef')
  }
  
  const showDetailId = (array) => {//根据ID显示查询详情修改面板
    typeName.value = '建筑物单体'
    if (array != null && array.length == 2) {
      let id = array[0];
      let dataType = array[1];
      //根据id查询数据
      handleDetil(id, dataType);
    }
  }
  /** 获取省列表 */
  function getProvinceData() {
    getProvince().then((response) => {
      provinceData.value = response.data;
      completeRefreshData.value = true;//显示地图
    });
  }
  const cityId = ref('');
  const countyId = ref('');
  const provinceId = ref('');
  //选择省
  function chooseProvince(value) {
    let id = ''
    cityData.value = [];
    areaData.value = [];
    if (value == "全国") {
      form.value.dataRangeProvince = null;
    } else {
      if (open.value) {//上传面板
        // queryParams1.value.dataRangeProvince = value.name;
        // queryParams1.value.dataRangeCity = "";
        // queryParams1.value.dataRangeArea = "";
        id = value
      } else if (showHideQueryDivBool.value) {//查询面板
        pageSize.value.dataRangeCity = null;
        pageSize.value.dataRangeArea = null;
        pageSize.value.dataRangeProvince = value.name;
        cityId.value = ''
        countyId.value = ''
        provinceId.value = value.id
        id = value.id
      }
      getChildArea(id).then(response => {
        cityData.value = response.data;
      });
    }
  }
  //选择市
  function chooseCity(value) {
    let id = ''
    if (open.value) {//上传面板
      // queryParams1.value.dataRangeCity = "";
      // queryParams1.value.dataRangeCity = value.name;
      // queryParams1.value.dataRangeArea = "";
      id = value
    } else if (showHideQueryDivBool.value) {//查询面板
      pageSize.value.dataRangeCity = value.name;
      pageSize.value.dataRangeArea = null;
      cityId.value = value.id
      countyId.value = ''
      id = value.id
    }
    areaData.value = [];
    getChildArea(id).then((response) => {
      areaData.value = response.data;
    });
  }
  //选择区县
  function chooseCounty(value) {
    if (open.value) {//上传面板
      // queryParams1.value.dataRangeArea = value.name;
    } else if (showHideQueryDivBool.value) {//查询面板
      pageSize.value.dataRangeArea = value.name;
      countyId.value = value.id
    }
  }

  const addClose = () => {
      proxy.resetForm('ruleForm')
      queryParams1.value.dataRangeProvince = ''
      queryParams1.value.dataRangeCity = ''
      queryParams1.value.dataRangeArea = ''
    }

  // 根据数据级别重置版本范围
  const chooseFormScope = (value) => {
    if (value == "1") {//国家级
      queryParams1.value.dataRangeProvince = "全国";
    } else {
      queryParams1.value.dataRangeProvince = "";
    }
    queryParams1.value.dataRangeCity = "";
    queryParams1.value.dataRangeArea = "";
    form.value.dataRangeProvince = null;
    form.value.dataRangeCity = null;
    form.value.dataRangeArea = null;
    proxy.$refs['ruleForm'].validateField(['dataRangeProvince']);
    cityData.value = [];
    areaData.value = [];
  }

  const chooseFormScope1 = (value) => {
    if (value == "1") {//国家级
      pageSize.value.dataRangeProvince = "全国";
    } else {
      pageSize.value.dataRangeProvince = "";
    }
    pageSize.value.dataRangeCity = "";
    pageSize.value.dataRangeArea = "";
    form.value.dataRangeProvince = null;
    form.value.dataRangeCity = null;
    form.value.dataRangeArea = null;
    proxy.$refs['selectRef'].validateField(['dataRangeProvince']);
    cityData.value = [];
    areaData.value = [];
  }
  function handleQuery1() {
    proxy.$modal.loading('等待中...');
    let params = {
      dataRangeCountry: pageSize.value.dataRangeCountry,
      dataRangeProvince: pageSize.value.dataRangeProvince == '全国' ? '' : provinceId.value,
      dataRangeCity: cityId.value,
      dataRangeArea: countyId.value,
      page: pageSize.value.page,
      rows: pageSize.value.rows
    }
    page(params).then(res => {
      leaderList.value = res.data.rows
      total.value = res.data.total
      proxy.$modal.closeLoading();
    }).catch(
      proxy.$modal.closeLoading()
    )
  }

  const versionLoading = ref(false)
function selectVersionCode() {
  versionLoading.value = true
  openLeader.value = true
  page({ ...pageSize.value }).then(res => {
    leaderList.value = res.data.rows
    total.value = res.data.total
    versionLoading.value = false
  }).catch(() => versionLoading.value = false)
}
const selectRadio = ref('')
const selectionData = ref([])
function getCurrentRow(row) {
  if (selectRadio.value) {
    if (selectRadio.value == row.id) {
      selectRadio.value = ''
      selectionData.value = {};// 取消勾选就把回传数据清除
      return
    }
  }
  selectRadio.value = row.id;
  selectionData.value = row;
}
function querySelect() {
  openLeader.value = false;
  queryParams.value.city = selectionData.value.cityName;
  queryParams.value.county = selectionData.value.countyName;
  queryParams.value.province = selectionData.value.provinceName;
  queryParams.value.versionCode = selectionData.value.versionCode;
  openLeader.value = false;
}
// 更多数据
function handleMore(row) {
  proxy.$refs['selectMunchRef'].toggleRowExpansion(row);
}

// 下载文件
function handleDownload(row) {
  var query = {
    attachId: row.attachId,
    name: row.attachName
  }
  location.href = import.meta.env.VITE_APP_BASE_API + "/attachment/downLoadFile?attachId=" + encodeURIComponent(query.attachId);
}
//删除数据版本
function handleDelete(row) {
    const id = row.id;
    proxy.$modal.confirm('是否确认删除该版本数据？').then(function () {
        return delVersions(id);
    }).then(() => {
      openLeader.value = true
      page({ ...pageSize.value }).then(res => {
        leaderList.value = res.data.rows
        total.value = res.data.total
        versionLoading.value = false
      }).catch(() => versionLoading.value = false)
      proxy.$modal.msgSuccess("删除成功");
    }).catch(() => { });
}
  const selectData = ref([])
  //文件及图层查询
  function queryClick() {
    /*//查询数据类型
    queryDataType.value = queryParams.value.dataType;
    let dataType = queryDataType.value;
    if (dataType == null) {
      dataType = "";
    }
    // if (dataType === "") {
    //   alertMsg("请选择数据类型!");
    //   return;
    // }
    selectId.value = "";//清空选中ID
    selectData.value = [];
    //查询条件
    let sqlText = "";
    //省市县查询过滤
    let province = queryParams.value.province;
    let city = queryParams.value.city;
    let county = queryParams.value.county;
    if (province && province !== "") {
      if (city && city !== "") {
        if (county && county !== "") {
          sqlText = "province like '%" + province + "%' and city like '%" + city + "%' and county like '%" + county + "%' and data_version = '" + queryParams.value.versionCode + "'";
        } else {
          sqlText = "province like '%" + province + "%' and city like '%" + city + "%' and data_version = '" + queryParams.value.versionCode + "'";
        }
      } else {
        sqlText = "province like '%" + province + "%' and data_version = '" + queryParams.value.versionCode + "'";
      }
    }
    let defenceLevel = queryParams.value.defenceLevel;//设防情况
    let structureType1 = queryParams.value.structureType1;//结构类型
    if (defenceLevel && defenceLevel !== "") {
      if(sqlText!==""){
        sqlText += " and ";
      }
      sqlText += "defenceLevel = '" + defenceLevel + "'";
    }
    if (structureType1 && structureType1 !== "") {
      if(sqlText!==""){
        sqlText += " and ";
      }
      sqlText += "structureType1 = '" + structureType1 + "'";
    }
    //图层查询参数
    layerInfoParams.value = {//查询图层信息参数（图层序号、图层名称、查询条件、是否显示）
      code: '1',
      name: '建筑物单体',
      sqlText: sqlText,
      show: true,
    };*/
    //查询建筑物单体地图数据列表
    if (queryParams.value.versionCode === "") {
      alertMsg("请选择数据版本!");
      return;
    }
    getMapList();
  }
  //设置选择数据ID
  const setSelectId = (obj) => {
    if (obj) {
      selectDataList.value = [obj];
      let id = obj.selectListId;
      let dataType = obj.selectType;
      handleDetil(id, dataType);
    }
  }
  //根据id查询数据
  function handleDetil(id, dataType) {
    detailTable.value = false;//关闭表格面板
    nextTick(() => {
      selectListId.value = id;//选中查看详情数据Id
      selectType.value = dataType;//选中查看详情数据类型
      detailTable.value = true;//打开表格面板
    });
  }
  //地图对象
  const map = ref(null);
  const getMap = (obj) => {
    map.value = obj;
  }
  //关闭表格面板
  function closeDetailResultDiv() {
    detailTable.value = false;//关闭表格面板
  }
  const queryDataType = ref("");//查询数据类型
  const typeName = ref('')
  const paramsData = ref({})
  //查询列表数据
  function queryTableClick() {
    
    typeName.value = '建筑物单体'
    //查询数据类型
    // queryDataType.value = queryParams.value.dataType;
    // let dataType = queryDataType.value;
    // if (dataType == null) {
    //   dataType = "";
    // }
    // if (dataType === "") {
    // alertMsg("请选择数据类型!");
    // return;
    // }
    if (queryParams.value.versionCode === "") {
      alertMsg("请选择数据版本!");
      return;
    }
    selectListId.value = "";//清空Id
    selectDataList.value = [];
    selectType.value = queryParams.value.dataType;//数据类型
    paramsData.value = queryParams.value
    detailTable.value = true;//打开表格面板
  }
  //警告消息
  function alertMsg(msg) {
    proxy.$modal.msgWarning(msg);
  }
  // 添加-保存（保存新版本）
  function submitForm() {
    proxy.$refs["ruleForm"].validate(valid => {
    if (valid) {
      const fileList = JSON.parse(JSON.stringify(proxy.$refs["attachmentFileRef"].fileList))
      const attachIds = []
      for (var i = 0; i < fileList.length; i++) {
        attachIds.push(fileList[i].attachId)
      }
      form.value.attachmentIds = attachIds.join(",")
      form.value.dataRangeProvince = queryParams1.value.dataRangeProvince
      form.value.dataRangeCity = queryParams1.value.dataRangeCity
      form.value.dataRangeArea = queryParams1.value.dataRangeArea
      const query = { ...form.value }
      uploadAdministrativeArea(query).then(res => {
        open.value = false
        alertMsg('添加成功')
      })
    }
  })
  }

  function closeVersicode() {
    pageSize.value.dataRangeCountry = ''
    pageSize.value.dataRangeProvince = ''
    pageSize.value.dataRangeCity = ''
    pageSize.value.dataRangeArea = ''
  }
  // 确认上传数据文件
  function uploadFile(value) {
    if (value.list) {
      form.value.dataFileIds = value.list[0].attachId;
    } else {
      form.value.dataFileIds = '';
    }
  }
  function dels() {
    form.value.dataFileIds = '';
  }

  const structureTypeArr1 = ref([])
  const defenceLevelArr = ref([])
  const usageArr1 = ref([])
  async function getDictData() {
    await getDict("jglxyj").then(response => {
      structureTypeArr1.value = response.data;
    });
    await getDict("sfqk").then(response => {
      defenceLevelArr.value = response.data;
    });
    await getDict("fwytyj").then(response => {
      usageArr1.value = response.data;
      console.log(usageArr1.value,'laallla');
    });
  }
  const structureTypeArr21 = ref([])
  const structureTypeArr22 = ref([])
  const structureTypeArr26 = ref([])
  const structureTypeArr2All = ref([])
  async function getDictData2() {
    await getDict("qtjgej").then(response => {
      structureTypeArr21.value = response.data;
    });
  
    await getDict("gjhntjgej").then(response => {
      structureTypeArr22.value = response.data;
    });
  
    await getDict("gycfej").then(response => {
      structureTypeArr26.value = response.data;
    });
    structureTypeArr2All.value = [...structureTypeArr21.value, ...structureTypeArr22.value, ...structureTypeArr26.value]
  }
  const structureTypeArr2 = ref([])
  function chooseStructureType(value) {
    queryParams.value.structureType2 = "";
    if (value == "1") {
      getDict("qtjgej").then(response => {
        structureTypeArr2.value = response.data;
      });
    } else if (value == "2") {
      getDict("gjhntjgej").then(response => {
        structureTypeArr2.value = response.data;
      });
    } else if (value == "6") {
      getDict("gycfej").then(response => {
        structureTypeArr2.value = response.data;
      });
    } else {
      structureTypeArr2.value = [];
    }
  }
  /** 查询建筑物单体地图数据列表 */
  function getMapList() {
    let param = {
        provinceId: queryParams.value.dataRangeProvince,
        cityId: queryParams.value.dataRangeCity,
        countyId: queryParams.value.dataRangeArea,
        defenceLevel: queryParams.value.defenceLevel,
        structureType1: queryParams.value.structureType1,
        structureType2: queryParams.value.structureType2,
        versionCode:queryParams.value.versionCode
    }   
    //地图查询全部建筑物单体数据列表
    mapAllListBuilding(param).then((response) => {
      nextTick(() => {
        allListData.value = response.data.rows;
      });
    });
  }
  
  onMounted(() => {
    completeRefreshSingleBuilding.value = true;//防止地图刷新后不显示
    // getMapList();
    getProvinceData();
    getDictData();
    getDictData2();
  });
  </script>
  
  <style lang="scss" scoped>
  //查询面板
  .new-queryDiv {
    position: absolute;
    top: 20px;
    left: 105px;
  }
  
  .new-queryDiv-inner {
    padding: 10px 0 0;
  }
  .new-legend{
    position: absolute;bottom: 0px;right: 20px;background: #fff;border: 1px solid #707070;border-radius: 4px;padding: 10px;
  }
  .new-legend div img{
    margin-right: 10px;
    top: 4px;
    position: relative;
  }
  .singleBuilding-add-dialog {
  height: 85%;
  overflow: hidden;

  &>.el-dialog__body {
    height: calc(100% - 126px);
    overflow-y: auto;
    padding: 0;

    .el-scrollbar__view {
      padding: 20px;
    }
  }
}
  .expandTable {
  padding: 5px 10px 5px 105px;

  h3 {
    font-weight: bold;
  }

  p {
    margin: 0px;
    line-height: 25px !important;
  }
}
.sub-tit{
	font-size: 14px;
	color: #707070;
	margin-bottom: 10px;
	margin-right: 10px;
	display: inline-block;
	font-weight: 600;
  .file-tit{
	font-size: 14px;
	margin: 10px 0px 10px 24px;
	font-weight: 600;
}
}
  </style>
  